<!-- 使用弹层, 快速展示帮助文档 -->
<template>
    <div>
        <el-card class="box-card" style="margin-top: -40px">
            <!-- 加载一个隐藏的空编辑器，取保展示内容的 css 文件完全被加载 (主要是插件部分的css 加载) -->
            <MdEditor content.sync="" hidden=""/>
            <!--  <span class="github-markdown-body" v-html="contentHtml"></span>-->
            <span class="vuepress-markdown-body" v-html="contentHtml"></span>
        </el-card>
    </div>
</template>

<script>

// 1、轻量版:  VueMarkdownEditor
import VueMarkdownEditor from '@kangc/v-md-editor';
// 2、codemirror版: VMdEditor
import VMdEditor, {xss} from '@kangc/v-md-editor/lib/codemirror-editor';


export default {
    data() {
        return {
            contentHtml: "",
        }
    },
    props: {
        // 配置中心的 code
        code: String
    },
    computed: {},
    created() {
        // 根据 code 查询数据将其转为 html 进行展示
        this.crud.get("/api/admin/sys/config/findByCode", {code: this.code}).then(res => {
            // this.contentHtml = xss.process(VMdEditor.themeConfig.markdownParser.render(res.data.data.content));
            this.contentHtml = xss.process(VMdEditor.vMdParser.themeConfig.markdownParser.render(res.data.data.content));
            this.contentHtml += "<br />"
        })
    },
    methods: {}
}
</script>

<style>
.vuepress-markdown-body:not(.custom) {
    padding-top: 1rem;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    padding-bottom: 2rem;
}
</style>
